<template lang="pug">
div
    .main-index(v-if="$route.path === '/childCare/growthObserve/record'")
      div
        .header-h.active 教案活动编辑
        .edit-h.flex.justify-s.wrap
           .mr20
            <el-radio v-model="recordObj.radio" label="1">(动16-3小)杯子...  (照片:1 视频:0)</el-radio>
           div
            <el-radio v-model="recordObj.radio" label="2">(动16小书完成)把...  (照片:1 视频:0)</el-radio>
      div
          .header-h 选择学生
          el-checkbox-group(v-model="recordObj.checkList")
           el-checkbox(v-for="(item,index) in recordObj.studentArr" :label="item" :key="index") {{item}}
      div
          .header-h 学习活动照片管理
          form-box(
            ref="basicForm"
            :fields="formFields"
            :showBtns="false"
            labelWidth="126px"
            isFilter=true
            :layoutCol="{ sm: 6, md: 6, lg: 6 }"
          )
          upfile-info(:upfileInfoArr.sync="upfileInfoArr" :studentArr="recordObj.studentArr")
      .flex.justify-e
         el-button.gradientVertical(@click="saveBtn") 保存
    router-view(v-else)
</template>
<script>
// import { mapGetters } from 'vuex'
// import { seachConfig } from './config'
import AImage from '@/components/Basic/Image'
import IPagination from '@/components/Basic/Pagination'
import UpfileInfo from './components/UpfileInfo'
// import Item from './components/item'
// import MyDrawer from './components/myDrawer'

export default {
  components: {
    IPagination,
    AImage,
    UpfileInfo
    // Item,
    // MyDrawer
  },
  data () {
    return {
      recordObj: {
        radio: '',
        checkList: [],
        studentArr: ['詹三', '李淑', '曹仁', '李三', '曹五', '李三2', '曹五2', '李三3', '曹五3']
      },
      url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-08_21-10-05-817.webp',
      upfileInfoArr: []

    }
  },
  computed: {
    formFields () {
      return [
        {
          key: 'imgFile',
          // rules: [{ required: true, message: '请输入' }],
          type: 'upload',
          label: '',
          fieldProps: {
            imgFlag: false,
            btnText: '点击上传图片',
            limit: 1000,
            accept: 'image/*',
            'show-file-list': false,
            success: this.upImgSuccess
          }

        },
        {
          key: 'videoFile',
          // rules: [{ required: true, message: '请输入' }],
          type: 'upload',
          label: '',
          fieldProps: {
            imgFlag: false,
            btnText: '点击上传视频',
            limit: 10,
            accept: '.mp4',
            'show-file-list': false,
            success: this.upVideoSuccess
          }
        }
      ]
    }
  },
  watch: {
    'recordObj.checkList' (val) {
      console.log(val)
    }
  },

  methods: {
    deleteTag (index) {
      alert(index)
    },
    // 上传成功后的
    upImgSuccess ({ file }) {
      if (file.response) {
        const url = file.response.data.url
        this.getInfoList(url, 'img')
      }
    },
    upVideoSuccess ({ file }) {
      if (file.response) {
        const url = file.response.data.url
        this.getInfoList(url, 'video')
      }
    },
    getInfoList (fileUrl, type) {
      const obj = Object.assign({}, {
        fileUrl,
        type,
        tags: this.recordObj.checkList
      })
      this.upfileInfoArr.push(obj)
      console.log(this.upfileInfoArr)
    },
    saveBtn () {
      this.$message.success('保存成功')
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
